<template>
  <div>
    <el-input
      v-model="keyword"
      placeholder="输入关键词"
      @keyup.enter="search"
      clearable
      @clear="clearInput"
    ></el-input>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()

const keyword = ref((route.query.keyword as string) || '')

const search = () => {
  router.push({
    path: route.path,
    query: { ...route.query, keyword: keyword.value }
  })
}

const clearInput = () => {
  keyword.value = ''
  search()
}

// 监听URL中的keyword参数
watch(
  () => route.query.keyword,
  (newKeyword) => {
    keyword.value = newKeyword as string
  }
)

// onMounted(() => {
//   // 在页面加载时更新URL中的keyword参数
//   search()
// })
</script>
